<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>注册</title>
<link rel="stylesheet"
	href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script
	src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script
	src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
ajaxCall("get", "ClazzServlet", initClazz,null);
function initClazz(data){
	removeAll();
	var obj = JSON.parse(data);
	for ( var i in obj) {
		addOption(obj[i].name,obj[i].id);
	}
}
function addOption(text,value){ 
	var obj=document.getElementById('sClazz'); 
	
	obj.options.add(new Option(text,value)); 
	} 
	
function removeAll(){ 
	var obj=document.getElementById('sClazz'); 
	obj.options.length=0; 
	} 

	function kp1(txt) {
		var name = document.all.name.value;
		if (name.length < 1) {
			txt.style.borderColor = "red";
		} else {
			txt.style.borderColor = "green";
		}


	}
	function kp2(txt) {
		var name = document.all.disname.value;
		if (name.length < 1) {
			txt.style.borderColor = "red";
		} else {
			txt.style.borderColor = "green";
		}


	}
	function kp3(txt) {
		var pwd = document.all.pwd.value;
		if (pwd.length < 1) {
			txt.style.borderColor = "red";
		} else {
			txt.style.borderColor = "green";
		}


	}
	function kp4(txt) {
		var pwd = document.all.pwd.value;
		var pwd1 = document.all.pwd1.value;
		if (pwd != pwd1) {
			txt.style.borderColor = "red";
		} else {
			txt.style.borderColor = "green";
		}


	}
	function kp5(txt) {
		var phone = document.all.phone.value;
		if (phone.length != 11) {
			txt.style.borderColor = "red";
		} else {
			txt.style.borderColor = "green";
		}


	}
	
	function kp6(txt) {
		var email = document.all.email.value;
		if (!email.match(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/)){
			txt.style.borderColor = "red";
		} else {
			txt.style.borderColor = "green";
		}


	}
	
	
	function a() {
		
		var name = document.all.name.value;
		var pwd = document.all.pwd.value;
		var phone = document.all.phone.value;
		var pwd1 = document.all.pwd1.value;
		var disname = document.all.disname.value;
		var email = document.all.email.value;
		var photo=document.all.Photo.value;
		
		if (name.length < 1 || pwd.length < 1 ||  pwd1 != pwd || phone.length != 11 || pwd1.length < 1 || !email.match(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/)) {
			alert("信息输入错误或不完整");
			return false;
		}else{
					return true;
		
		}

	}
	
	function ajaxCall(method, url, callBackFunction,data) {

		var httprequest = new XMLHttpRequest();
		httprequest.onreadystatechange = function() {
			if (httprequest.readyState == 4 && httprequest.status == 200) {
				callBackFunction(httprequest.responseText);
			}
		}
		httprequest.open(method, url, true);
		httprequest.setRequestHeader("X-Requested-With", "AJAX");
		httprequest.send(data);
	}
</script>
</head>
<body background="img/Zhuoku060.jpg">

	<div class="container">
		<div class="row text-center  ">
			<div class="col-md-12">
				<br /> <br /> <br />
			</div>
		</div>
		<div class="row">

			<div
				class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
				<div class="panel panel-default">
					<div class="panel-heading">
						<strong>请 输 入 注 册 信 息</strong>
					</div>
					<div class="panel-body ">
						<form role="form" action="UserServlet?method=regeister"
							method="post" enctype="multipart/form-data" onsubmit="return a()">
							<br />
							<div class="form-group input-group">
								<b>用户名</b><br> <input type="text" onkeyup="kp1(this)"
									name="name" class="form-control" placeholder="请输入用户名" />
							</div>
							<div class="form-group input-group">
								<b>真实姓名</b><br> <input type="text" onkeyup="kp2(this)"
									name="disname" class="form-control" placeholder="请输入真实姓名" />
							</div>
							<div class="form-group input-group">
								<b>密码</b><br>
								 <input type="password" name="pwd"
									onkeyup="kp3(this)" class="form-control" placeholder="请输入密码" />
							</div>
							<div class="form-group input-group">
								<b>确认密码</b><br> <input type="password" name="pwd1"
									onkeyup="kp4(this)" class="form-control" placeholder="请确认密码" />
							</div>

							<div class="form-group input-group">
								<b>邮箱</b><br> <input type="email" name="email" onkeyup="kp6(this)"
									class="form-control" placeholder="请输入邮箱" />
							</div>
							<div class="form-group input-group">
								<b>手机号</b><br> <input type="number" name="phone"
									onkeyup="kp5(this)" onkeyup="value=value.replace(/[^\d]/g,'')"  class="form-control" placeholder="请输入手机号" />
							</div>
							<div class="form-group input-group">
								<b>性别</b><br> <label><input name="sex" type="radio"
									value="boy" checked="true" />男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								</label> <label><input name="sex" type="radio" value="girl" />女
								</label>
							</div>
							<div class="form-group input-group">
								<b>班级</b><br> <select name="clazz" id="sClazz">
								</select>
							</div>
							<div class="form-group input-group">
								<b>头像(选填)</b><br>
								<div class="form-group">
									<input type="file" name="Photo" id="Photo" accept="image/*">
								</div>
							</div>
							<button type="submit" a href="index.jsp" class="btn btn-success ">
								注册</a>
							</button>
							已 注 册？ <a href="login.jsp">点 击 这 里</a>
						</form>
					</div>

				</div>
			</div>


		</div>
	</div>



</body>
</html>
